import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/scheduler.dart';
import 'dart:math' as math;

class HeroAnimationRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Hero动画第一路由'),
        ),
        body: Column(
          children: <Widget>[
            PhotoHero("index8.jpg", () {
              Navigator.push(
                  context,
                  CupertinoPageRoute(
                      builder: (context) => HeroAnimationRoute2()));
            }, 300),
            Spacer(),
            RadialExpansionDemo()
          ],
        ));
  }
}

class HeroAnimationRoute2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Hero动画第二路由"),
      ),
      body: Align(
        alignment: Alignment.topRight,
        child: PhotoHero("index8.jpg", () {
          Navigator.pop(context);
        }, 100),
      ),
    );
  }
}

class PhotoHero extends StatelessWidget {
  PhotoHero(this.photo, this.onTap, this.width);

  final String photo;
  final VoidCallback onTap;
  final double width;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return SizedBox(
      width: width,
      child: Hero(
          tag: photo,
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: onTap,
              child: Image.asset(
                photo,
                fit: BoxFit.contain,
              ),
            ),
          )),
    );
  }
}

class PhotoHero2 extends StatelessWidget {
  PhotoHero2(this.photo, this.onTap);

  final String photo;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Material(
      color: Theme.of(context).primaryColor.withOpacity(0.25),
      child: InkWell(
        onTap: onTap,
        child: Image.asset(
          photo,
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

class RadialExpansion extends StatelessWidget {
  RadialExpansion({this.maxRadius, this.child})
      : cilpRectSize = 2.0 * (maxRadius / math.sqrt2);
  final double maxRadius;
  final double cilpRectSize;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ClipOval(
      child: Center(
        child: SizedBox(
          width: cilpRectSize,
          height: cilpRectSize,
          child: ClipRect(
            child: child,
          ),
        ),
      ),
    );
  }
}

class RadialOval extends StatelessWidget{
  RadialOval({this.child});

  final Widget child;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ClipOval(
      child: child,
    );
  }
}

class RadialRect extends StatelessWidget{
  RadialRect({this.child});

  final Widget child;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ClipRect(
      child: Padding(
        padding: EdgeInsets.all(30),
        child: child,
      ),
    );
  }
}

class RadialExpansionDemo extends StatelessWidget {
  static const double KMinRadius = 32.0;
  static const double KMaxRadius = 128.0;
  static const Curve opacityCurve =
      const Interval(0.0, 0.75, curve: Curves.fastOutSlowIn);

  /// RectCenterArcTween [可选]定义目标 Hero 的边界，在从起始位置到目的位置的运动过程中该如何变化
  static RectTween _rectTween(Rect begin, Rect end) {
    return MaterialRectCenterArcTween(begin: begin, end: end);
  }

  static Widget _buildPage(
      BuildContext context, String imagesName, String description) {
    return Container(
      color: Theme.of(context).canvasColor,
      child: Center(
        child: Card(
          elevation: 8.0,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              SizedBox(
                width: KMaxRadius * 2.0,
                height: KMaxRadius * 2.0,
                child: Hero(
                  tag: imagesName,
                  child: RadialRect(
                    child: PhotoHero2(imagesName, () {
                      Navigator.pop(context);
                    }),
                  ),
                  createRectTween: _rectTween,
                ),
              ),
              Text(
                description,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
                textScaleFactor: 3.0,
              ),
              const SizedBox(height: 16.0,)
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildHero(BuildContext context, String imagesName, String description) {
    return Container(
      width: KMinRadius * 2.0,
      height: KMinRadius * 2.0,
      child: Hero(
        createRectTween: _rectTween,
        tag: imagesName,
        child: RadialOval(
          child: PhotoHero2(imagesName, (){
            Navigator.push(context, MaterialPageRoute(builder: (context) {
              return _buildPage(context, imagesName, description);
            }));
          }),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        _buildHero(context, "index2.jpg", "第一张"),
        _buildHero(context, "index4.jpg", "第一张"),
        _buildHero(context, "index55.jpg", "第一张"),
        _buildHero(context, "index9.jpg", "第一张"),
      ],
    );
  }
}
